<template>
    <el-container>
      <el-main>
        <div class="tabs-style">
        <el-tabs>
          <el-tab-pane label="所有文章">
            <div class="article-preview">
              <div>
                <div class="info">
                  <div><el-avatar :src="avatar" /></div>
                  <div>
                    <a href="" class="author">Eric Simons</a>
                    <span class="date">January 20th</span>
                  </div>
                </div>
                <el-button round size="small" class="pull-xs-right">
                  <i class="el-icon-star-on"></i> 29
                </el-button>
              </div>
              <a href="/article/可扩展的 Web 应用程序" class="preview-link">
                <h1>如何构建可扩展的 Web 应用程序</h1>
                <p>
                  开发技术在过去几年里以前所未有的速度发展。开发技术在过去几年里以前所未有的速度发展。
                  开发技术在过去几年里以前所未有的速度发展。
                </p>
                <p>查看更多...</p>
              </a>
            </div>
            <hr color="EBEDF0" style="margin-left: 10rem" />
            <div class="article-preview">
              <div>
                <div class="info">
                  <div><el-avatar :src="avatar" /></div>
                  <div>
                    <a href="" class="author">Eric Simons</a>
                    <span class="date">January 20th</span>
                  </div>
                </div>
                <el-button round size="small" class="pull-xs-right">
                  <i class="el-icon-star-on"></i> 29
                </el-button>
              </div>
              <a href="/article/可扩展的 Web 应用程序" class="preview-link">
                <h1>如何构建可扩展的 Web 应用程序</h1>
                <p>
                  开发技术在过去几年里以前所未有的速度发展。开发技术在过去几年里以前所未有的速度发展。
                  开发技术在过去几年里以前所未有的速度发展。
                </p>
                <p>查看更多...</p>
              </a>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的文章"> </el-tab-pane>
        </el-tabs>
        </div>
      </el-main>
      <el-aside class="sidebar">
        <p>热门标签</p>
        <el-tag
          v-for="(tag, index) in tags"
          :key="index"
          effect="dark"
          size="medium"
        >
          {{ tag }}
        </el-tag>
      </el-aside>
    </el-container>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  const avatar = ref("https://api.realworld.io/images/demo-avatar.png");
  const tags = ref([
    "软件编程",
    "javascript",
    "全栈开发",
    "Vue.js",
    "XD",
    "PhotoShop",
    "node",
    "Springboot",
  ]);
  </script>
  
  <style scoped>
  /* scoped限制css样式仅限于本组件,以免造成冲突 */
  
  /* 为文章预览设置底部边框 */
  .article-preview {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding-bottom: 0.5rem; /* 添加底部内边距以与边框分离 */
  }
  
  .tabs-style{
    margin-top: 2rem;
    margin-bottom: 3rem;
    margin-left: 10rem; /* 添加左边距 */
  }
  
  /* 为文章描述和其他文字设置灰色 */
  .article-preview p,
  p {
    color: #909399; /* 文字颜色设置为灰色 */
  }
  
  /* 移除所有超链接的下划线 */
  a {
    text-decoration: none;
  }
  
  /* 设置作者样式 */
  .author {
    font-size: 1.2em; /* 增大字体大小 */
    color: #67c23a; /* 设置作者名字的颜色 */
    text-decoration: none; /* 移除下划线 */
  }
  
  /* 设置日期样式 */
  .date {
    margin-top: 0.5rem;
    display: block;
    color: #909399;
  }
  
  /* 减少行距 */
  .author,
  .date {
    margin: 0; /* 移除默认的外边距 */
    line-height: 1; /* 减小行高 */
  }
  
  /* 为头像和作者信息设置并排布局 */
  .info {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
  }
  
  /* 为头像设置固定宽度和高度 */
  .el-avatar {
    width: 32px;
    height: 32px;
    margin-right: 0.5rem; /* 添加右边距以与作者名字分开 */
  }
  
  /* 为文章右侧点赞按钮定义右对齐 */
  .pull-xs-right {
    float: right !important;
  }
  
  /* 设置文章标题超链样式 */
  .preview-link h1 {
    color: black;
  }
  
  /* 设置右侧标签栏样式 */
  .sidebar {
    flex: 0 0 25%; /* 固定宽度比例 */
    padding-left: 1rem;
  }
  
  /* 为每个标签设置背景颜色 */
  .sidebar .el-tag {
    background-color: #909399;
    color: white; /* 文字颜色设置为白色以提高可读性 */
    margin-top: 0.25rem;
    margin-right: 0.5rem;
    border: none;
  }
  
  /* 设置分页栏样式 */
  .pagination {
    margin-left: 10rem; /* 添加左边距 */
  }
  </style>
  